 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>html+css3实现长方体效果</title>
 </head>
 <body>
 <div class="square-box">
     <div class="front">11box1</div>
     <div class="bottom"></div>
     <div class="back"></div>
     <div class="top"></div>
 <!--    <div class="left"></div>
     <div class="right"></div> -->
 </div>
<div class="square-box2">
     <div class="front">11box2</div>
     <div class="bottom">222</div>
     <div class="back">333</div>
     <div class="top">444</div>
 <!--    <div class="left"></div>
     <div class="right"></div> -->
 </div>
 <style type="text/css">
	 html{
		 
	 }
 	 .square-box{
		width: 200px;
    /* height: 100px; */
    box-sizing: border-box;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(-10deg) rotateY(-15deg) rotateZ(0deg);
    margin: 0px auto;
    margin-top: 50px;
 	 }
 	 .square-box>div{
 	     position: absolute;
 	 }
 	 /*设置六面的视角*/
 	 .square-box>.front{
 	     width: 100px;
 	     height: 100px;
 	     transform: translateZ(50px);
 	     background:red;
			 opacity: 0.5;
 	 }
 	 .square-box>.bottom{
 	     width: 100px;
 	     height: 100px;
 	     transform: rotateX(270deg) translateZ(50px);
 	     background:deeppink;
 	 }
 	 .square-box>.back{
 	     width: 100px;
 	     height: 100px;
 	     transform: translateZ(-50px);
 	     background:darkcyan;
 	 }
 	 .square-box>.top{
 	     width: 100px;
 	     height: 100px;
 	     transform: rotateX(90deg) translateZ(50px);
 	     background: yellow;
 	 }
/* 	 .square-box>.left{
 	     width: 100px;
 	     height: 100px;
 	     transform: rotateY(270deg) translateZ(50px);
 	     background: black;
 	 }
 	 .square-box>.right{
 	     width: 100px;
 	     height: 100px;
 	     transform: rotateY(90deg) translateZ(150px);
 	     background: #a7cbf0;
 	 } */
	 
	 
	 
	 
	 .square-box2{
	 		width: 200px;
	  /* height: 100px; */
	  box-sizing: border-box;
	  position: relative;
	  transform-style: preserve-3d;
	  transform: rotateX(-10deg) rotateY(-15deg) rotateZ(0deg);
	  margin: 0px auto;
	  margin-top: 50px;
	 }
	 .square-box2>div{
	     position: absolute;
	 }
	 /*设置六面的视角*/
	 .square-box2>.front{
	     width: 100px;
	     height: 100px;
	     transform: translateZ(50px);
	     background:red;
	 			 opacity: 0.5;
	 }
	 .square-box2>.bottom{
	     width: 100px;
	     height: 100px;
	     transform: rotateX(270deg) translateZ(50px);
	     background:deeppink;
	 }
	 .square-box2>.back{
	     width: 100px;
	     height: 100px;
	     transform: translateZ(-50px);
	     background:darkcyan;
	 }
	 .square-box2>.top{
	     width: 100px;
	     height: 100px;
	     transform: rotateX(90deg) translateZ(50px);
	     background: yellow;
	 }
	/* .square-box2>.left{
	     width: 100px;
	     height: 100px;
	     transform: rotateY(270deg) translateZ(50px);
	     background: black;
	 }
	 .square-box2>.right{
	     width: 100px;
	     height: 100px;
	     transform: rotateY(90deg) translateZ(150px);
	     background: #a7cbf0;
	 } */
 	
	
 </style>
 </body>
 </html>